<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    <div id="app">

    </div>
    <script type="text/javascript" src='../vue/dist/vue.js'></script>
    <script type="text/javascript" src='../vue/dist/vue-router.js'></script>
    <script type="text/javascript">
        // 路由router-link
        var Login = {
            template: `<div>
                我是登录页面
            </div>`
        }
        var Register = {
            template: `<div>
                我是注册页面
            </div>`
        }
        var App = {
            template: `<div>
                <router-link :to="{name:'login'}">登录去</router-link>
                <router-link :to="{name:'register'}">注册去</router-link>
                <router-view></router-view>
            </div>`
        };
        Vue.use(VueRouter);
        var router = new VueRouter({
            routes: [
                // 路由对象有了name名称就等于有了变量名，router-link只需说明这个变量名就行了
                { name: 'login', path: '/login1111111111111', component: Login },
                { name: 'register', path: '/register', component: Register }
             ]
        })
        new Vue({
            el: '#app',
            router: router,
            components: {
                app: App
            },
            template: '<app/>'
        })
    </script>
</body>
</html>